import classnames from 'classnames'
import { useState,useEffect } from 'react'

import styles from './index.module.scss'
// 改变的初始值，和内容
const noop=()=>{}
const Textarea = ({ className, maxLength = 100,value='',onChange=noop, ...rest }) => {
  // 设置初始值value=''
  const [text, setText] = useState(value)
  // 改变状态的动作
  const onTextChange = e => {
    // 更新状态
    setText(e.target.value)
    // 将e这个对象传给组件
    onChange(e)
  }
  // 进入页面渲染更新数值
  useEffect(() => {
    setText(value)
  }, [value])
  return (
    <div className={classnames(styles.root, className)}>
      <textarea
        className="textarea"
        value={text}
        onChange={onTextChange}
        maxLength={maxLength}
        {...rest}
      />
      <div className="count">
        {text.length}/{maxLength}
      </div>
    </div>
  )
}

export default Textarea
